import React, { useState, useRef } from 'react';
import { UserOutlined, HeartOutlined, LockOutlined, QuestionCircleOutlined } from '@ant-design/icons';
import './index.less';
import EditInfoItem from '../../component/EditInfoItem';
import { randomColorById } from '../../utils';
import FQ from './FQ';

export default function Setting() {
    const [clickType, setClickType] = useState('common');
    const labeInput = useRef<HTMLInputElement>(null);
    const [labels, setLabels] = useState([
        {
            id: '0',
            content: '计算机科学与技术',
        },
        {
            id: '2',
            content: '华中科技大学',
        },
        {
            id: '3',
            content: '清华大学',
        },
        {
            id: '4',
            content: '操作系统',
        },
    ]);

    function changeType(e: React.MouseEvent<HTMLLIElement>) {
        const target = e.currentTarget;
        const type = target.dataset.type;
        if (!type) return;
        setClickType(type);
    }

    function addLabel() {
        if (!labeInput.current) return;
        const value = labeInput.current.value.trim();
        if (!value) return;
        setLabels([
            ...labels,
            {
                id: labels.length + 1 + '',
                content: labeInput.current.value,
            },
        ]);
        labeInput.current.value = '';
    }

    return (
        <>
            <div className="setting-page mid">
                <div className="left-setting-nav">
                    <ul>
                        <li data-type="safeCenter" onClick={(e) => changeType(e)}>
                            <UserOutlined />
                            <span>安全中心</span>
                        </li>
                        <li data-type="recommend" onClick={(e) => changeType(e)}>
                            <HeartOutlined />
                            <span>推荐偏好</span>
                        </li>
                        <li data-type="privacy" onClick={(e) => changeType(e)}>
                            <LockOutlined />
                            <span>隐私设置</span>
                        </li>
                        <li data-type="common" onClick={(e) => changeType(e)}>
                            <QuestionCircleOutlined />
                            <span>常见问题</span>
                        </li>
                    </ul>
                </div>
                <div className="right-setting-content">
                    <section className="safeCenter" style={clickType === 'safeCenter' ? {} : { display: 'none' }}>
                        <ul>
                            <li>
                                <EditInfoItem title="用户名" name="username" type="text" value="Keqing" />
                            </li>
                            <li>
                                <EditInfoItem title="密码" name="password" type="password" value="**********" />
                            </li>
                            <li>
                                <EditInfoItem title="绑定手机" name="phonenumber" type="number" value="1369583290" />
                            </li>
                        </ul>
                    </section>

                    <section className="recommend" style={clickType === 'recommend' ? {} : { display: 'none' }}>
                        <h2>我的标签</h2>
                        <div className="my-select-label">
                            {labels.map((item) => {
                                const color = randomColorById(item.id);
                                return (
                                    <span key={item.id} className="label-item" style={{ backgroundColor: color }}>
                                        {item.content}
                                    </span>
                                );
                            })}
                        </div>
                        <div className="add-label">
                            <input type="text" ref={labeInput} />
                            <button onClick={() => addLabel()}>添加label</button>
                        </div>
                    </section>
                    <section className="privacy" style={clickType === 'privacy' ? {} : { display: 'none' }}>
                        privacy
                    </section>
                    <section className="common" style={clickType === 'common' ? {} : { display: 'none' }}>
                        <FQ />
                    </section>
                </div>
            </div>
        </>
    );
}
